<template>
  <div class="main">
    <div :class="['item-icon', item.type]" />
    <div class="item-name">{{ item.name }}</div>
    <div v-if="item.type ==='prod'">
      <input :value="item.value" class="item-input" @change="$emit('setFlow',$event)">
    </div>
    <div v-else>{{ item.value }}</div>
  </div>
</template>

<script>
export default {
  name: 'TagCard',
  props: {
    item: {
      type: Object,
      required: false,
      default: () => {
        return {
          type: 'temperature',
          name: '温度',
          value: 50
        }
      }
    }
  },

  data() {
    return {
      settedFlow: null
    }
  }
}
</script>
<style lang="scss" scoped>
.main{
  height: 6.5rem;
  width: 5rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  color: white;
  overflow: hidden;
  margin: 0 1rem;
  //  background-color: green;
}
.item-icon{
  width:2rem;
  flex-basis: 40%;
  background-size:50% 50%;
  // margin: 5px 10px;
}
.item-name{
  margin: 0.5rem 0;
  color: #00f4ff;
}

.humidity {
  background: url('~@assets/report/humidity.svg') no-repeat center 50%;
}
.temperature {
  background: url('~@assets/report/temperature.svg') no-repeat center 50%;
}
.elec {
  background: url('~@assets/report/elec.png') no-repeat center 50%;
}
.prod {
  background: url('~@assets/report/chanliang.svg') no-repeat center 50%;
}
.setting {
  background: url('~@assets/report/setting.svg') no-repeat center 50%;
}
.item-input{
  width:100%;
  color: white;
  background-color:transparent;
  border: 0;
  border-bottom: 1px solid #00f4ff;
  outline: none;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
}

</style>
